<template>
	<view class="container">
		<view class="header">
			<text class="title">请选择新房间</text>
		</view>

		<view class="form-container">
			<view class="form-item">
				<text class="form-label">楼号：</text>
				<picker mode="selector" :range="buildings" @change="buildingChange">
					<view class="form-input">{{ selectedBuilding || '请选择楼号' }}</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="form-label">单元：</text>
				<picker mode="selector" :range="units" @change="unitChange">
					<view class="form-input">{{ selectedUnit || '请选择单元' }}</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="form-label">房号：</text>
				<picker mode="selector" :range="roomNumbers" @change="roomNumberChange">
					<view class="form-input">{{ selectedRoomNumber || '请选择房号' }}</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="form-label">房间：</text>
				<picker mode="selector" :range="rooms" @change="roomChange">
					<view class="form-input">{{ selectedRoom || '请选择房间' }}</view>
				</picker>
			</view>

			<button class="submit-btn" @click="handleConfirm">确定</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			buildings: ['1号楼', '2号楼', '3号楼', '4号楼', '5号楼', '6号楼'],
			units: ['1单元', '2单元', '3单元', '4单元', '5单元'],
			roomNumbers: ['101', '102', '201', '202', '301', '302', '401', '402', '501', '502', '601', '602'],
			rooms: ['主卧', '次卧', '南中卧', '北卧', '厨房间', '大厅间', '大厅间大', '大厅间小'],
			selectedBuilding: '',
			selectedUnit: '',
			selectedRoomNumber: '',
			selectedRoom: ''
		}
	},
	methods: {
		buildingChange(e) {
			this.selectedBuilding = this.buildings[e.detail.value];
		},
		unitChange(e) {
			this.selectedUnit = this.units[e.detail.value];
		},
		roomNumberChange(e) {
			this.selectedRoomNumber = this.roomNumbers[e.detail.value];
		},
		roomChange(e) {
			this.selectedRoom = this.rooms[e.detail.value];
		},
		handleConfirm() {
			if (!this.selectedBuilding || !this.selectedUnit || !this.selectedRoomNumber || !this.selectedRoom) {
				uni.showToast({
					title: '请选择完整的房间信息',
					icon: 'none'
				});
				return;
			}

			uni.navigateTo({
				url: `/pages/detail/detail?building=${this.selectedBuilding}&unit=${this.selectedUnit}&roomNumber=${this.selectedRoomNumber}&room=${this.selectedRoom}`
			});
		}
	}
}
</script>

<style>
.container {
	padding: 40rpx;
}

.header {
	margin-bottom: 40rpx;
}

.title {
	font-size: 44rpx;
	font-weight: 500;
	color: #333;
	text-align: center;
}

.form-container {
	background: #fff;
	border-radius: 16rpx;
	padding: 40rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.form-item {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.form-label {
	width: 120rpx;
	font-size: 32rpx;
	color: #666;
}

.form-input {
	flex: 1;
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 8rpx;
	font-size: 32rpx;
	color: #333;
}

.submit-btn {
	width: 100%;
	background-color: #07c160;
	color: #fff;
	font-size: 34rpx;
	padding: 30rpx 0;
	border-radius: 8rpx;
	border: none;
}

.submit-btn:active {
	background-color: #06ad56;
	transform: scale(0.98);
}
</style> 